<!--
  Generated template for the TasksDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="orange">
    <ion-title>
      任务详情
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="goPage('MemberPage')">
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>
  <!-- 1 -->
  <div>
    <!-- 头部开始 -->
    <div class="id-top ht-relative" padding>

      <!-- 中 -->
      <div class="" padding-top>
        <div class="ht-100 ht-overflow ht-relative">
          <img [src]="util.parseImageUrl(userInfo['head_img'])" alt="" class="id-photo">
        </div>
        <div class="ht-100 ht-fff  ht-font-14 ht-padding-tb" text-center>
          {{userInfo['nickname']}}
          <!--<img src="assets/imgs/icon-idsj.png" alt="" class="icon-p">-->
          <!--<img src="assets/imgs/icon-idtp.png" alt="" class="icon-p">-->
          <!--<img src="assets/imgs/icon-idtp2.png" alt="" class="icon-p">-->
          <!--<img src="assets/imgs/icon-idtp3.png" alt="" class="icon-p">-->
          <!--<span class="id-p">其他证件x8</span>-->
        </div>
        <!--<div class="ht-100 ht-overflow ht-fff ht-line-20 ht-font-13 ht-text-center">-->
        <!--ID:1234567898-->
        <!--</div>-->
      </div>
      <!-- 右 -->
      <!--<div class="ht-20 ht-float-left">-->
      <!--<div class="ht-100 ht-text-center ht-background ht-border-radius ht-line-20 ht-font-f29603 ht-font-12 ht-yc">-->
      <!--设置悬赏任务-->
      <!--</div>-->
      <!--<div class="ht-100 ht-text-right ht-line-20 ht-fff ht-font-12 ht-yc" padding-bottom padding-top>-->
      <!--置顶x5-->
      <!--</div>-->
      <!--<div class="ht-100 ht-text-right ht-line-20 ht-fff ht-font-12 ht-yc" padding-bottom>-->
      <!--刷新x5-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <!-- <div class="id-bottom">
              <div>
                  已报名:<i class="ht-d32d25">{{data['apply_list']['total']}}人</i>
                  截至日期:<i class="ht-d32d25">{{data['amoy_detail']['other_data']?.reward_end_time}}</i>
              </div>
          </div> -->
    <!-- 头部结束 -->
    <!-- 进度条开始 -->
    <div class="ht-100 ht-overflow" padding>
      <div class="pd-jd flex flex-line-center flex-align-center">
        <div text-center style="position:relative;width:25%;border-radius:15px;height:30px;line-height:30px;background:linear-gradient(to right, #e69b2e, #ea5505);color:#fff;"
          [ngStyle]="{'background':this.sentInfo.status == 0 ? 'linear-gradient(to right, #e69b2e, #ea5505)' : '#999' }">
          待接受
          <div class="pd-absolute" style="left: 50%;margin-left:-12px;" *ngIf="this.sentInfo.status == 0"></div>
        </div>
        <div style="color:#ccc;">—</div>
        <div text-center style="position:relative;width:25%;border-radius:15px;height:30px;line-height:30px;color:#fff;" [ngStyle]="{'background':this.sentInfo.status == 1 ? 'linear-gradient(to right, #e69b2e, #ea5505)' : '#999' }">
          待平台确认
          <div class="pd-absolute" style="left: 50%;margin-left:-12px;" *ngIf="this.sentInfo.status == 1"></div>
        </div>
        <div style="color:#ccc;">—</div>
        <div text-center style="position:relative;width:25%;border-radius:15px;height:30px;line-height:30px;background:linear-gradient(to right, #e69b2e, #ea5505);color:#fff;"
          [ngStyle]="{'background':this.sentInfo.status == 2 ? 'linear-gradient(to right, #e69b2e, #ea5505)' : '#999' }">
          待金主确认
          <div class="pd-absolute" style="left: 50%;margin-left:-12px;" *ngIf="this.sentInfo.status == 2"></div>
        </div>
        <div style="color:#ccc;">—</div>
        <div text-center style="position:relative;width:25%;border-radius:15px;height:30px;line-height:30px;background:linear-gradient(to right, #e69b2e, #ea5505);color:#fff;"
          [ngStyle]="{'background':this.sentInfo.status == 3 ? 'linear-gradient(to right, #e69b2e, #ea5505)' : '#999' }">
          任务完成
          <div class="pd-absolute" style="left: 50%;margin-left:-12px;" *ngIf="this.sentInfo.status == 3"></div>
        </div>
      </div>
    </div>
    <!--信息列表-->
    <div padding>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding>
        <div class="ht-overflow">
          <div class="ht-float-left">任务名称</div>
          <div class="ht-float-right ht-text-center ht-font-f29603">{{dataInfo.title}}</div>
        </div>
      </div>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
        <div class="ht-overflow">
          <div class="ht-float-left">商品名称</div>
          <div class="ht-float-right ht-text-center ht-font-f29603">{{dataInfo.goods}}</div>
        </div>
      </div>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
        <div class="ht-overflow">
          <div class="ht-float-left">任务总数</div>
          <div class="ht-float-right ht-text-center ht-font-f29603">{{dataInfo.num}}</div>
        </div>
      </div>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
        <div class="ht-overflow">
          <div class="ht-float-left">剩余数量</div>
          <div class="ht-float-right ht-text-center ht-font-f29603">{{dataInfo.remain_num}}</div>
        </div>
      </div>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
        <div class="ht-overflow">
          <div class="ht-float-left">任务赏金</div>
          <div class="ht-float-right ht-text-center ht-font-f29603">{{dataInfo.fee}}</div>
        </div>
      </div>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
        <div class="ht-overflow">
          <div class="ht-float-left">发布时间</div>
          <div class="ht-float-right ht-text-center ht-font-f29603">{{dataInfo.create_time}}</div>
        </div>
      </div>
      <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
        <div class="ht-overflow">
          <div>任务描述</div>
          <div class="ht-666 ht-margin-top10">{{dataInfo.content}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 2 -->
  <div margin-top padding>
    <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
      <div class="ht-overflow">
        <div class="ht-float-left">饭店名称</div>
        <div class="ht-float-right ht-text-center" *ngIf="sentInfo.company_name!=''">{{sentInfo.company_name}}</div>
        <div class="ht-float-right ht-text-center" *ngIf="sentInfo.company_name==''">
          <input type="text" [(ngModel)]="company_name" placeholder="请输入饭店名称" class="input-text" />
        </div>
      </div>
    </div>

    <div class="ht-100 ht-padding-tb ht-border-bottom" padding-left padding-right>
      <div class="">
        <div padding-bottom>门头照片</div>
        <!-- 图片上传 -->
        <div class="flex flex-wrap" *ngIf="sentInfo.company_photo!=''">
          <div class="margin-bottom-5 ht-relative ht-50 pic-box">
            <img [src]="'http://admin.moments.taoxiansheng.com'+sentInfo.company_photo">
          </div>
        </div>
        <div class="flex flex-wrap" *ngIf="sentInfo.company_photo==''">
          <div class="margin-bottom-5 ht-relative ht-50 pic-box" *ngIf="company_photo">
            <img [src]="config.imageUrl+company_photo">
            <span class="del-image" (click)="delImage(company_photo)">删除</span>
          </div>
          <div class="ie-img margin-bottom-5 pic-box ht-50" *ngIf="!company_photo">
            <input type="file" class="file-input" (change)="uploadImage($event)">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 3 -->
  <div>
    <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
      <div class="ht-overflow">
        <div>请标注饭店所在的位置</div>
        <div class="ht-100" style="height: 200px;" id="map" #map></div>
      </div>
    </div>
    <div class="ht-100 ht-overflow ht-padding-tb ht-border-bottom" padding-left padding-right>
      <div class="ht-overflow">
        <div>备注说明</div>
        <textarea class="ht-666 ht-margin-top10" style="height: 160px;width: 100%" *ngIf="sentInfo.summary">{{sentInfo.summary}}</textarea>
        <textarea class="ht-666 ht-margin-top10" style="height: 160px;width: 100%" *ngIf="!sentInfo.summary" placeholder="请输入..." [(ngModel)]='summary'></textarea>
      </div>
    </div>
  </div>
</ion-content>


<ion-footer>
  <ion-toolbar>
    <div class="ht-100 ht-float-left ht-line-50 ht-text-center ht-fff" [ngClass]="{'ht-f29603':dataInfo.remain_num != 0}" (click)="submitData()" *ngIf='sentInfo.status==0'>
      <span *ngIf="dataInfo.remain_num != 0">接受任务</span>
      <span class="ht-666" *ngIf="dataInfo.remain_num == 0">任务名额已完</span>
    </div>
    <div class="ht-100 ht-float-left ht-line-50 ht-text-center ht-666" *ngIf='sentInfo.status!=0'>
      <span *ngIf="sentInfo.status == 6">已结款</span>
      <span *ngIf="sentInfo.status == 2">平台已确认</span>
      <span *ngIf="sentInfo.status == 5">已落选</span>
      <span *ngIf="sentInfo.status == 3">待结款</span>
      <span *ngIf="sentInfo.status == 1">已报名</span>
    </div>
  </ion-toolbar>
</ion-footer>
